<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" +request.getServerPort() + path + "/";
%> 

 <script type="text/javascript" src="../Scripts/jquery.min.js"></script>
  <script type="text/javascript" src="<%=basePath %>/js/vue.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery_treeview/jquery.treeview.js"></script>
	<link rel="stylesheet" type="text/css" href="../Scripts/jquery_treeview/jquery.treeview.css">
	<link type="text/css" rel="stylesheet" href="../Styles/file.css" />
    <style type="text/css">
    li{list-style:none}
	#box{
		margin-left: 50px;
	
	}
    </style>
</head>
<body>
<div id="box">
<div>正在为[<span style="color: red; font-size: 14px">${selectRoleById.rolename}</span>]配置权限</div>

<div id="div1">

 <table>
		<ul id="tree" class="filetree">
			<template v-for="list in topList">
				<li >
				
					<label for='cb_45'><input type="checkbox" name="privilegeIds" value="{{list.privilegeid}}"/>{{list.name}}</lable>
						<ul v-for='tlist in twoList'>
							<li v-if='list.children==tlist.parent'>
								<input value="{{tlist.privilegeid}}" type="checkbox" name="privilegeIds" />{{tlist.name}}
								<ul v-for='clist in chilList'>
									<li v-if='tlist.children==clist.parent'>
										<input value="{{clist.privilegeid}}" type="checkbox" name="privilegeIds"/>{{clist.name}}
									</li>
									
								</ul>
							</li>
						</ul>		
				</li>
				</template>
			
			</ul>	
</table>
<button type="button" onclick="save()">保存</button>
<!--显示表单内容-->
</div>
</body>
<script type="text/javascript">
var vnm=new Vue({
	el:"#div1",
	data:{
		topList:'',
		twoList:'',
		chilList:'',
	},
	methods:{
		selectList:function(){
			var dom=this;
			$.ajax({
				url:'<%=basePath%>/selectPrivilegeTopList',
				dataType:'json',
				success:function(res){
				
					dom.twoList=res.privilegeById;
					dom.topList=res.selectPrivilegeTopList;
					dom.chilList=res.selectPrivilegeChil;
					//dom.a();
				}
			});
		},
/* 	a:function(){
		$('input[name=privilegeIds]').attr('checked',this.checked);
		

	}, */
		
	},
	
	created:function(){
		this.selectList();
		alert("1");
	}
})
function save(){
	privilegeIds=document.getElementsByName("privilegeIds");
	var roleId=${selectRoleById.roleid}

	var str="";
	for(i in privilegeIds){
		if(privilegeIds[i].checked){
		str+=privilegeIds[i].value+",";
		}
	}
	$.ajax({
		url:'<%=basePath%>/ainsertPrivilegeIds',
		type:'post',
		data:{str:str,roleId:roleId},
		dataType:'json',
		success:function(res){
			alert("设置成功")
		}
	})
	
}

//回显
$(document).ready(function(){
	$("#tree").treeview();
	var a=${checkedPrivilegeId}
	alert("a"+a);
	roleId=document.getElementsByName("privilegeIds")
		for(j in roleId){
			for(i in a)
			if(roleId[j].value==a[i]){
			$(roleId[j]).attr('checked',true);

			}
	}
})
</script>

</html>